<!-- HeaderPromotionBanner.vue -->
<template>
  <div class="header-promotion-banner" style="background-color: rgb(255, 52, 67)">
    <div class="promotion-content wrapper pos-relative">
      <router-link :to="linkUrl" class="block">
        <div class="flex justify-center" style="height: 60px">
          <el-image :src="imgUrl" alt="图片" style="height: 60px"></el-image>
        </div>
      </router-link>
      <button
        @click.stop="closeBanner"
        class="close pos-absolute right-0 top-0 hover:text-white"
      >
        ×
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
defineProps({
  message: String,
  linkUrl: {
    type: String,
    default: "/",
  },
  linkText: String,
});

const emit = defineEmits(["close"]);

const imgUrl = ref(
  "https://img14.360buyimg.com/babel/jfs/t20280904/289814/28/20418/45447/68ba44e5Ff418d785/02d58d77b7d03e1b.png.avif"
);
const closeBanner = (e: Event) => {
  e.stopPropagation();
  emit("close");
};
</script>
<style scoped lang="scss">
.close {
  width: 25px;
  height: 25px;
}
</style>
